<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>props的基本使用</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//定义一个Person组件
			class Person extends React.Component{
				state = {a:1}
				render(){
					console.log('render',this)
					const {name,age,sex} = this.props
					return (
						<ul>
							<li>姓名：{name}</li>	
							<li>年龄：{age}</li>	
							<li>性别：{sex}</li>	
						</ul>
					)
				}
			}
			//渲染组件到页面
			ReactDOM.render(<Person name="张三" age="18" sex="女"/>,document.getElementById('root'))
		</script>
	</body>
</html>